<template>
  <view class="page">
    <view class="header">
      <view class="align-center justify-between">
        <view class="align-center" @click="$to('/pages/communityUser/index?id=' + info.user_id)">
          <image style="" class="avatarImg" :src="info.avatar" />
          <view class="ml10 flex-col">
            <text class="nickname">{{ info.nickname }}</text>
            <text class="time">{{ info.c_time }}</text>
          </view>
        </view>
        <view class="quantity">
          <view>成交数：{{ info.cj_num }}</view>
          <view>评价数：{{ info.pl_num }}</view>
        </view>

        <view class="follow" v-if="info.isAtten == 1" @click="lookOut(1)"> 关注 </view>
        <view class="uncheck" v-if="info.isAtten == 2" @click="lookOut(2)"> 已关注 </view>
      </view>

      <view class="title">{{ info.title }}</view>
      <view class="mt10 flex-row">
        <view class="tags" v-for="(item, index) in info.tags" :key="index" @click="cutHome(item)">
          {{ item.name }}
        </view>
      </view>
      <view class="contentBox">
        {{ info.introduce }}
      </view>
    </view>

    <view v-for="(item, index) in imgList" :key="index">
      <image class="previewImg" mode="widthFix" :src="item" v-if="!item.endsWith('.mp4')" @click="openImg" />
    </view>
    <!-- 
    <view v-for="(item, index) in videoList" :key="index" @click="openVideo(item.url)" class="videoPopu">
      <uv-loading-icon class="mt20" :size="30" v-if="!item.img"></uv-loading-icon>
      <image class="previewImg" mode="widthFix" :src="item.img" />
      <image class="previewPlay" mode="widthFix" src="../../static/img/play.png" />
    </view> -->

    <view class="box_4">
      <view class="userOperation align-center justify-between">
        <view class="align-center">
          <image class="addInco" mode="aspectFit" src="/static/productDetail/3.png" />
          <text class="textIcon">{{ info.area }}</text>
        </view>

        <view class="align-center">
          <view class="align-center" style="margin-right: 10px">
            <image class="lookIcon" mode="aspectFit" src="/static/productDetail/5.png" />
            <text class="textIcon">{{ info.see }}</text>
          </view>
          <view class="align-center" style="margin-right: 10px">
            <image v-if="!info.is_like" @click="doLike(1)" mode="aspectFit" class="likeInco" src="/static/productDetail/2a.png" />
            <image v-if="info.is_like" @click="doLike(2)" mode="aspectFit" class="likeInco" src="/static/productDetail/2.png" />
          </view>
          <view class="align-center" style="margin-right: 10px">
            <text class="textIcon">{{ info.dianzan }}</text>
            <!--没收藏-->
            <view class="align-center" style="margin-right: 10px" @click="collect(1)" v-if="!info.is_collect">
              <image mode="aspectFit" class="starInco" src="/static/productDetail/1a.png" />
              <text class="textIcon">{{ info.is_collect ? '已收藏' : '收藏' }}</text>
            </view>
            <view class="align-center" style="margin-right: 10px" @click="collect(2)" v-if="info.is_collect">
              <image mode="aspectFit" class="starInco" src="/static/productDetail/1.png" />
              <text class="textIcon">{{ info.is_collect ? '已收藏' : '收藏' }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="grayLine"></view>
      <view class="text-wrapper_20 flex-row">
        <text class="text_12">留言</text>
        <text class="text_13" style="margin-left: 20rpx">{{ info.replycount }}</text>
      </view>

      <view v-for="(item, index) in replylist" :key="index" v-if="replylist.length > 0">
        <view class="image-text_17 flex-row justify-between" style="margin-left: 20rpx">
          <image class="labelImg" :src="item.avatar" />
          <view class="text-group_16 flex-col">
            <text class="text_23">{{ item.nickname }}</text>
            <text class="text_24">
              {{ item.content }}
            </text>
          </view>
        </view>
        <view class="text-wrapper_23 flex-row justify-between">
          <text class="text_25"> {{ item.c_time }}</text>
          <text class="chatBtn" style="margin-left: 10rpx" @click="showInputBox2(item.id)" v-if="userInfo.id == info.user_id">回复</text>
          <text class="chatBtn" style="margin-left: 10rpx; color: red" @click="delReply(item.id)" v-if="userInfo.id == item.user_id">删除</text>
        </view>
        <!--        这是第二层-->

        <view v-for="(item2, index2) in item.list" :key="index2">
          <view class="block_7 flex-row">
            <view class="image-text_18 flex-row">
              <image class="labelImg" :src="item2.avatar" />
              <view class="text-group_17 flex-col">
                <view class="align-center">
                  <view class="text_27">{{ item2.nickname }}</view>
                  <view class="text-wrapper_9">
                    {{ item2.ttp }}
                  </view>
                </view>

                <text class="text_28">
                  {{ item2.content }}
                </text>
              </view>
            </view>
          </view>
          <view class="text-wrapper_24 flex-row justify-between">
            <text class="text_30">{{ item2.time }}</text>
            <text class="text_31" @click="showInputBox2(item.id)" v-if="userInfo.id == info.user_id">回复</text>
          </view>
        </view>
      </view>
      <view v-if="replylist.length == 0" class="noneData"></view>
    </view>

    <view class="footer align-center justify-between" v-if="showInputBox">
      <view class="align-center footerIpt">
        <uni-easyinput v-model="content" class="ipt" @confirm="handleConfirm2" :inputBorder="false" :cursorSpacing="20" :focus="true" placeholder="说点什么…"></uni-easyinput>

        <view class="textBtn" @click="handleConfirm2"> 回复 </view>
      </view>

      <view class="adminBtn flex-col" @click="showInputBox = false"> 取消 </view>
    </view>

    <view class="footer align-center justify-between" v-if="!showInputBox">
      <view class="align-center footerIpt" :style="{ width: goodStatus.status == 0 ? '75%' : '95%' }">
        <uni-easyinput v-model="content" class="ipt" @confirm="sendContent" :cursorSpacing="20" :inputBorder="false" placeholder="说点什么…"></uni-easyinput>
        <view class="textBtn" @click="sendContent"> 发送 </view>
      </view>
      <view>
        <view class="adminBtn flex-col" @click="toWant" v-if="userInfo.id != info.user_id && goodStatus.status == 0"> 我想要 </view>
        <view class="adminBtn flex-col" @click="$to('/pages/publish/index?id=' + info.id)" v-if="userInfo.id == info.user_id && goodStatus.status == 0"> 管理 </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      article_id: '',
      info: {},
      content: '',
      replylist: [],
      showInputBox: false,
      goodStatus: {},
      userInfo: {},
      imgList: [],
      videoList: [],
      haveVideo: false,
      page: 1,
      total: 0
    }
  },
  onShow() {
    if (this.article_id) {
      this.init()
    }
  },
  onLoad(option) {
    this.article_id = option.id
    // this.init()
  },

  methods: {
    init() {
      this.$http({
        url: 'getArticleStatus',
        data: {
          article_id: this.article_id
        }
      }).then(res => {
        this.goodStatus = res.data
        this.$http({
          url: 'getUserInfo'
        }).then(res => {
          this.$db.setUser(res.data.myself)
          this.userInfo = res.data.myself
          this.getData()
          this.getreplylist()
        })
      })
    },
    toWant() {
      if (this.userInfo.realname_verify == 0) {
        return uni.showModal({
          title: '提示',
          content: '请完善个人真实信息',
          confirmText: '去完善',
          success: res => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/realNameAuthentication/index'
              })
            }
          }
        })
      } else {
        this.$to('/pages/chat/index?user_id=' + this.info.user_id + '&goodId=' + this.info.id)
      }
    },
    openVideo(url) {
      uni.navigateTo({
        url: '/pages/test/videoPaly?url=' + url,
        animationType: 'slide-in-bottom',
        animationDuration: 200
      })
    },
    openImg() {
      uni.previewImage({
        urls: this.imgList
      })
    },
    showInputBox2(id) {
      var that = this
      that.id = id
      that.showInputBox = true
    },

    handleConfirm2(e) {
      var that = this

      if (!this.content) {
        uni.showToast({
          title: '请输入正确的内容',
          icon: 'none', // 不显示图标，如果你想要显示图标可以设置为 'success'、'fail' 等
          duration: 2000 // 持续时间，单位毫秒，默认1500
        })
        return
      }
      if (that.id) {
        that.showInputBox = false
        this.$http({
          url: 'reply',
          method: 'GET',
          data: {
            id: that.article_id,
            content: this.content,
            parent_id: that.id
          }
        }).then(res => {
          uni.showToast({
            title: '待审核通过后显示',
            icon: 'none', // 不显示图标，如果你想要显示图标可以设置为 'success'、'fail' 等
            duration: 3000 // 持续时间，单位毫秒，默认1500
          })
          that.id = ''
          that.getreplylist()
          that.showInputBox = false
          that.content = ''
        })
      }
    },

    sendContent() {
      // e.detail.value 是用户输入的内容
      if (!this.content) {
        uni.showToast({
          title: '请输入正确的内容',
          icon: 'none', // 不显示图标，如果你想要显示图标可以设置为 'success'、'fail' 等
          duration: 2000 // 持续时间，单位毫秒，默认1500
        })
        return
      }
      // 在这里执行你需要的操作，比如发送请求等
      this.$http({
        url: 'reply',
        method: 'GET',

        data: {
          id: this.article_id,
          content: this.content
        }
      }).then(res => {
        uni.showToast({
          title: '待审核通过后显示',
          icon: 'none',
          duration: 3000
        })
        this.getreplylist()
        this.content = ''
      })
    },
    delReply(id) {
      this.$http({
        url: 'delReply',
        method: 'post',
        data: {
          id
        }
      }).then(res => {
        this.init()
        this.getreplylist()
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        })
      })
    },
    getData() {
      this.imgList = []
      this.videoList = []

      this.$http({
        url: 'getArticleDetail',
        method: 'GET',
        data: {
          id: this.article_id
        }
      }).then(res => {
        this.info = res.data
        let thumbList = res.data.thumb_image_list
        this.imgList = res.data.imagelist.map(el => {
          if (el.endsWith('.mp4')) {
            let obj = {
              type: 'video',
              url: el,
              img: thumbList[0]
            }
            // 然后删除thumbList[0]
            thumbList.shift()
            return obj
          } else {
            // this.haveVideo = true
            // this.videoList.push({ url: el, img: '' })
            // this.$http({
            //   url: 'upLoadFile',
            //   data: { file: el }
            // }).then(res => {
            //   let index = this.videoList.findIndex(item => item.url === el)
            //   this.videoList[index].img = res.data.screen_shots_pic_url
            // })
          }
        })
      })
    },
    getreplylist() {
      this.$http({
        url: 'getreplylist',
        method: 'get',
        data: { page: this.page, id: this.article_id }
      }).then(res => {
        this.replylist = res.data
      })
    },
    doLike(type) {
      var that = this
      this.$http({
        url: 'like',
        data: {
          id: that.info.id,
          type: type
        },
        method: 'GET'
      }).then(res => {
        that.info.is_like = !that.info.is_like
      })
    },
    cutHome(val) {
      uni.setStorageSync('categoryId', val.id)
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    collect(type) {
      var that = this
      uni.request({
        url: this.$global.baseUrl + 'collect',
        header: {
          token: this.$db.getToken()
        },
        method: 'GET',
        data: {
          id: that.info.id,
          type: type
        },
        success: res => {
          that.info.is_collect = !that.info.is_collect
        }
      })
    },

    lookOut(type) {
      var that = this
      if (type == 1) {
        this.$http({
          url: 'attention',
          data: {
            b_user_id: that.info.user_id
          },
          method: 'GET'
        }).then(res => {
          that.info.isAtten = 2
        })
      } else {
        this.$http({
          url: 'attention2',
          data: {
            b_user_id: that.info.user_id
          },
          method: 'GET'
        }).then(res => {
          that.info.isAtten = 1
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../common/common.css';

.page {
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
  padding-bottom: 70px;
  display: block;
  overflow: hidden;
}

.header {
  padding: 16rpx 30rpx 36rpx 28rpx;
  display: block;
}

.avatarImg {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50px;
}

.nickname {
  font-weight: 400;
  font-size: 14px;
  color: #161616;
  line-height: 21px;
}

.follow {
  height: 60rpx;
  background-color: grey;
  border-radius: 100rpx;
  background-size: 144rpx 84rpx;
  padding: 16rpx 30rpx;
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
  color: #fff;
  font-size: 22rpx;
}

.uncheck {
  height: 60rpx;
  background-color: grey;
  border-radius: 100rpx;
  background-size: 144rpx 84rpx;
  padding: 16rpx 20rpx;

  color: rgba(255, 255, 255, 1);
  font-size: 22rpx;
}

.textIcon {
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
}

.title {
  color: rgba(51, 51, 51, 1);
  font-size: 34rpx;
  font-weight: 600;
  line-height: 40rpx;
  width: 100%;
  margin-top: 20px;
}

.tags {
  background-color: rgba(255, 244, 233, 1);
  border-radius: 2px;
  padding: 4rpx 6rpx 6rpx 6rpx;
  margin-right: 20rpx;
  color: rgba(255, 144, 25, 1);
  font-size: 22rpx;
  padding: 2px 5px;
  text-align: center;
}

.contentBox {
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  margin-top: 20px;

  .contentArea {
    width: 100%;
  }
}

.previewImg {
  width: 95%;
  align-self: center;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 10rpx;
}

.box_4 {
  padding: 30rpx 0 20rpx 0;
  width: 100%;
  box-sizing: border-box;
}

.userOperation {
  margin: 15px auto;
  width: 95%;
}

.image-text_14 {
  width: 118rpx;
  margin-bottom: 2rpx;
}

.time {
  font-weight: 400;
  font-size: 11px;
  color: #a8a8a8;
  line-height: 16px;
  margin-top: 5px;
}

.image-wrapper_2 {
  width: 150rpx;
  margin: 0 86rpx 0 514rpx;
}

.thumbnail_8 {
  width: 30rpx;
  height: 26rpx;
  margin-bottom: 4rpx;
}

.thumbnail_7 {
  width: 30rpx;
  height: 30rpx;
}

.grayLine {
  background-color: rgba(248, 248, 248, 1);
  width: 100%;
  height: 10rpx;
}

.text-wrapper_20 {
  width: 136rpx;
  margin: 30rpx 584rpx 0 30rpx;
}

.text_12 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 32rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 52rpx;
}

.text_13 {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 32rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 52rpx;
}

.videoPopu {
  position: relative;
  .previewPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    display: block;
    transform: translateX(-50%) translateY(-50%);
  }
}

.text_14 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 26rpx;
  letter-spacing: 0.5px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  margin-right: 494rpx;
}

.text_16 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(20, 184, 252, 1);
  font-size: 20rpx;
  letter-spacing: -0.3125px;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
  margin: -2rpx 6rpx 2rpx 6rpx;
}

.text_18 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.image-text_16 {
  width: 528rpx;
  margin: 48rpx 192rpx 0 30rpx;
}

.text-wrapper_22 {
  width: 148rpx;
  margin: 16rpx 492rpx 0 110rpx;
}

.quantity {
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
}

.image-text_17 {
  width: 690rpx;
  align-self: center;
  margin-top: 48rpx;
}

.labelImg {
  width: 64rpx;
  height: 64rpx;
  margin-right: 5px;
  border-radius: 50%;
}

.text_23 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 26rpx;
  letter-spacing: 0.5px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
  margin-right: 418rpx;
}

.text_24 {
  width: 610rpx;
  word-break: break-all;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-weight: NaN;
  text-align: left;
  line-height: 40rpx;
  margin-top: 12rpx;
}

.text-wrapper_23 {
  width: 150rpx;
  margin-top: 10px;
  margin-left: 48px;
}

.text_25 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  letter-spacing: 0.4615384638309479px;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.chatBtn {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.block_7 {
  width: 606rpx;

  height: auto;
  padding-right: 328rpx;
  margin: 20rpx 10rpx 0 114rpx;
}

.image-text_18 {
  width: 606rpx;
}

.label_5 {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 64rpx;
}

.text-group_17 {
  height: auto;
  padding-bottom: 40rpx;
}

.text_27 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 26rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 36rpx;
}

.text_28 {
  width: 526rpx;

  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  text-align: left;
  line-height: 40rpx;
  margin-top: 12rpx;
}

.text-wrapper_9 {
  width: 60rpx;
  background-color: rgba(231, 250, 253, 1);
  border-radius: 2px;
  margin-left: 10px;
  height: 28rpx;
  line-height: 28rpx;
  font-size: 20rpx;
  text-align: center;
  color: rgba(20, 184, 252, 1);
}

.text-wrapper_24 {
  width: 144rpx;
  margin: 0rpx 412rpx 0 194rpx;
  margin-top: -30rpx;
}

.text_30 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  letter-spacing: 0.4615384638309479px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 34rpx;
}

.text_31 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  text-align: left;
  line-height: 34rpx;
  margin-left: 5px;
}

.footer {
  width: 100%;
  background-size: 100% 100%;
  padding: 24rpx;
  padding-bottom: 20px;
  box-sizing: border-box;
  position: fixed;
  background: #fff;
  z-index: 1000;
  left: 0;
  bottom: 0px;

  .footerIpt {
    box-sizing: border-box;
    padding: 5px 15px;

    justify-content: space-between;
    background: #f5f7f9;
    border-radius: 17px;
    width: 75%;
    ::v-deep .uni-easyinput__content {
      background: #f5f7f9 !important;
    }
    .textBtn {
      color: #fe373c;
    }
  }
}

.adminBtn {
  width: 85px;
  height: 34px;
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
  border-radius: 17px;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  line-height: 34px;
}

.addInco {
  width: 14px;
  height: 16px;
  display: block;
  margin-right: 5px;
}

.lookIcon {
  width: 16px;
  height: 14px;
  display: block;
  margin-right: 5px;
}

.likeInco {
  width: 16px;
  height: 15px;
  display: block;
  margin-right: 5px;
}

.starInco {
  width: 16px;
  height: 16px;
  display: block;
  margin-right: 5px;
}
</style>
